import React, { useEffect, useRef, useState } from 'react';
import { connect, history } from 'umi';
import { Alert, Button, Space, Tag, Modal, notification, Row, Col, Checkbox, Form } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import RoleSetForm from './components/CancelOrder';
import PopImgShow from '@/components/PopImgShow';
import SearchCondition from '@/components/SearchCondition';
import { commission_percent, promoter_typeInfo, promoter_commission_typeInfo } from '@/common/contact'
import { uploadFile } from '@/utils/utils';
import Indentation from '@/components/Indentation';
import SelectShop from './components/SelectShop';
const PromoterList = (props) => {
    const { loading, dispatch, list, zm } = props;
    const { location } = history
    const { query } = location
    const { accessId, id } = query
    const childRef = useRef();
    const [form] = Form.useForm();
    let time = null
    const [visible, setVisible] = useState(false);
    const [codeVisible, setCodeVisible] = useState(false)
    const [promoterLevelList, setPromoterLevelList] = useState([])
    const [levelVisible, setLevelVisible] = useState(false)
    const [shareVisible, setShareVisible] = useState(false)
    const [selectList, setSelectList] = useState(false)
    const [shopId, setShopId] = useState([])
    const [params, setSearchParams] = useState({})
    const [shopVisible, setShopVisible] = useState(false)
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
                rowKeyList: selectedRows
            });
        },

    });
    const fetchUrl = () => {
        dispatch({
            type: 'promoter/fetchActivityUrl',
            callback: (e) => {
                const { activityUrl } = e
                setCodeVisible({
                    show: true,
                    detail: {
                        url: activityUrl
                    }
                })
            }
        })
    }
    const fakeExportPromoter = () => {
        dispatch({
            type: 'promoter/fakeExportCommissionPromoter',
            payload: {
                ...params,
                promoterId: id, goodsIds: shopId.map(item => { return item.goodsId }).toString()
            },
            callback: (e) => {
                const { url } = e
                uploadFile(url)
            }
        })

    }

    useEffect(() => { childRef.current.initData(); }, [params])

    // 搜索参数
    const searchItems = [
        {
            label: '商品',
            name: 'selectShop',
            type: 'autoComplete',
            placeholder: '请选择商品',
            onDropdownVisibleChange: () => {
                setShopVisible({
                    show: true,
                    details: shopId
                })
            }

        },
        {
            label: '推广员',
            name: 'promoterKeyword',
        },
        {
            label: '用户',
            name: 'userKeyword',
        },
        {
            label: '下单时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: commission_percent,

        },
        {
            label: '佣金类型',
            name: 'commissionType',
            type: 'select',
            select: promoter_commission_typeInfo,
        },
        {
            label: '推广员类型',
            name: 'promoterType',
            type: 'select',
            select: promoter_typeInfo,

        },
    ];
    const fetchGoodsShop = (e) => {
        if (!e) {
            clearTimeout(time)
            time = null
            setSelectList([])
        }
        if (time) {
            clearTimeout(time)
            time = setTimeout(() => {
                dispatch({
                    type: 'promoter/fetchListPromoterGoodsSelect',
                    payload: { keyword: e, page: 1, limit: 20 },
                    callback: (e) => {
                        time = null
                        setSelectList(e)
                    }
                })
            }, 300)
        } else {
            time = setTimeout(() => {
                dispatch({
                    type: 'promoter/fetchListPromoterGoodsSelect',
                    payload: { keyword: e, page: 1, limit: 20 },
                    callback: (e) => {
                        time = null
                        setSelectList(e)
                    }
                })
            }, 300)
        }

    }
    // table 表头
    const getColumns = [
        {
            title: '下单时间',
            dataIndex: 'orderCreateTime',

        },
        {
            title: '用户姓名',

            dataIndex: 'username',
        },
        {
            title: '手机',

            dataIndex: 'mobile',
        },
        {
            title: '商品名称',

            dataIndex: 'goodsName',
        },
        {
            title: '订单支付金额',
            dataIndex: 'orderPayFee',

        },
        {
            title: '推广员姓名',
            dataIndex: 'promoterName',
        },
        {
            title: '订单号',
            dataIndex: 'orderSn',
        },
        {
            title: '佣金类型',
            dataIndex: 'commissionType',
            render: (e) => {
                return promoter_commission_typeInfo[e]
            }
        },
        {
            title: '推广员类型',
            dataIndex: 'promoterType',
            render: (e) => {
                return promoter_typeInfo[e]
            }
        },
        {
            title: '奖励名称',
            dataIndex: 'rewardName',
        },

        {
            title: '佣金',
            dataIndex: 'commission',
        },
        {
            title: '佣金比例',
            dataIndex: 'commissionPercent',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return commission_percent[e]
            }
        },
        {
            title: '审核人',
            dataIndex: 'checkAdminName',
        },
        {
            title: '审核时间',

            dataIndex: 'checkTime',
        },
        {
            title: '审核备注',

            dataIndex: 'checkRemark',
            render: (e) => {
                return <Indentation str={e}></Indentation>
            }
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    title: '作废',
                    visible: record.status !== '5',
                    click: () => {
                        setVisible({
                            show: true,
                            selectIdList: [val],
                        })
                    },
                },
            ],
        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleSaveRole = (detail = {}) => {
        setVisible({
            show: true,
            detail,
        });
    };
    return (
        <div>
            <Row gutter={[36, 12]}>

                <Col span={24}>
                    <Space size={'large'}>
                        <Button type='primary' onClick={() => {
                            fakeExportPromoter();
                        }}>导出推广员佣金</Button>
                    </Space>
                </Col>
                <Col span={24}>
                    <div style={{ background: '#f5f5f5', padding: 24 }}>
                        <SearchCondition
                            form={form}
                            handleSearch={(e) => {
                                setSearchParams(e);
                            }}
                            searchItems={searchItems}
                        ></SearchCondition>
                    </div>
                </Col>
                <Col span={24}>
                    <Space>
                        <Checkbox checked={selectedRow.selectedRowKeys.length > 0 && selectedRow.selectedRowKeys.length === list.list.length} onChange={(e) => {
                            if (e.target.checked) {
                                setSelectedRow({
                                    ...selectedRow,
                                    selectedRowKeys: list.list.map(item => {
                                        return item.id.toString()
                                    }),
                                    rowKeyList: list.list
                                })
                            } else {
                                setSelectedRow({
                                    ...selectedRow,
                                    selectedRowKeys: [],
                                    rowKeyList: []
                                })
                            }

                        }}>当页全选</Checkbox>
                        <div>已选{selectedRow.selectedRowKeys.length} 条 </div>
                        <Button onClick={() => {
                            if (selectedRow.selectedRowKeys.length === 0) {
                                return notification.warn({
                                    message: '温馨提示',
                                    description: `请先选择要作废的业绩`,
                                });
                            } else {
                                setVisible({
                                    show: true,
                                    selectIdList: selectedRow.selectedRowKeys.map(item => { return parseInt(item) }),
                                })
                            }
                        }}>批量作废</Button>


                    </Space>
                </Col>
                <Col span={24}>
                    <TableDataBlock
                        rowSelection={selectedRow}
                        cRef={childRef}
                        loading={loading}
                        params={{ ...params, promoterId: id, goodsIds: shopId.map(item => { return item.goodsId }).toString() }}
                        firstFetch={false}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="promoter/fetchListPromoterCommission"
                        {...list}
                    ></TableDataBlock>
                </Col>

            </Row>
            <RoleSetForm
                cleanSelect={() => {
                    setSelectedRow({
                        ...selectedRow,
                        selectedRowKeys: [],

                    })
                }}
                visible={visible}
                onClose={() => setVisible(false)}
                handleCallback={handleCallback}
            ></RoleSetForm>
            <SelectShop
                onChange={(e) => {
                    setShopId(e)
                    form.setFieldsValue({
                        selectShop: e.map(item => { return item.goodsName }).toString()
                    })
                }}
                visible={shopVisible}
                onClose={() => setShopVisible(false)}
            ></SelectShop>

        </div >
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterCommissionList,
    loading: loading.effects['promoter/fetchListPromoterCommission']
}))(PromoterList);
